Étape 2 : Configurer la feuille de style

Ensuite, nous construisons un Style de Page pour la Vue de Page en utilisant une combinaison de XHTML et XSLT. Les spécifications complètes W3C pour XSLT sont disponibles sur www.w3c.org/tr/xslt.

Notre exemple est simple et basé sur la Literal Result Element de W3C comme spécifications de Style de Page. Avant que nous procédions à la construction du Style de Page, considérons l'illustration suivante prise dans les spécifications W3C :

<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >

<head>

<title>Expense Report Summary</title>

</head>

<body>

<p>Total Amount: <xsl:value-of select="expense-report/total"/></p>

</body>

</html>

Notons les points suivants :

L'attribut xsl:version doit être ajouté à la balise d'ouverture <html> ; il indique la version XSL requise par la feuille de style. Copiez/collez simplement ceci tel quel.
La page et le texte sont formatés en utilisant les tags standard XHTML.
L'élément XSLT value-of avec l'attribut select définit le chemin d'accès et le nom des données à utiliser pour la Vue de Page (informations trouvées dans le fichier xmldata.xml créé dans la précédente étape).

La configuration d'une feuille de style pour la Vue de Page est une combinaison de XHTML et XSLT à effectuer à l'aide d'un éditeur XSL ou d'un outil de développement web WYSIWYG.

Conseil : Si vous souhaitez modifier l'exemple de code plutôt que de créer une feuille de style à partir de zéro, passez à Utiliser l'exemple de code ci-dessous. Il peut toutefois être utile de consulter Utiliser un éditeur XSL pour comprendre la création d’une feuille de style.

Utiliser un éditeur XSL

Dans cet exemple, l'application Cooktop est utilisée :

Si vous utilisez Cooktop, sélectionner l'onglet stylesheet (xsl).
Le Style de Page requiert un tag d'ouverture <html> et un tag de fermeture </html> et le tag d'ouverture doit inclure l'attribut xsl:version :
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
</html>
Utilisez les balises XHTML pour définir la mise en page et l'apparence de la Vue de Page.
Note: Il est important, lors de l’utilisation de balises HTML, qu'elles aient une balise d'ouverture et de fermeture.
Vous pouvez définir un titre (dans cet exemple Vue de Page Personnes / Organisations) ainsi qu’un corps. Dans le corps, ajoutez les étiquettes de champ et tout formatage d'étiquette à afficher dans la Vue de Page :
```
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
```
```
	<title>Vue de Page Personnes/Organisations</title>
```
```
 <body>
```
```
 Prénom : 
```
```
 Nom : 
```
```
 </body>
```
```
</html>
```
Note: La balise   indique un saut de ligne.
L'élément XSLT value-of et l'attribut select définissent ensemble le chemin d'accès et le nom des données qui seront affichées dans la Vue de Page. Ils sont placés entre les balises d'ouverture <body> et de fermeture </body> :
```
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" >
```
```
 <title>Vue de Page Personnes/Organisations</title>
```
```
 <body>
```
```
 Prénom : <xsl :value-of select="/table/tuple/atom[@name='NamFirst']"/> 
```
```
 Nom : <xsl:value-of select="/table/tuple/atom[@name='NamLast']"/> 
```
```
	</body>
```
```
</html>
```
Conseil : Si l'un des champs que vous avez inclus dans votre rapport est une table imbriquée (par exemple, Autres noms : Détails personnels), consultez Comment gérer une table imbriquée ci-dessous.
La valeur utilisée par la déclaration select (après le signe égal) provient du fichier xmldata.xml. La section concernée est entourée des balises <table> et définit le chemin hiérarchique vers la valeur (atome) :
```
<table name="eparties">.
```
```
	
```
```
	<tuple>
```
```
 <atom name="NamFirst">Gerard</atom>
```
```
 <atom name="NamLast">Wood</atom>
```
```
	</tuple>
```
```
</table>
```
Pour afficher la valeur NamFirst à côté de l'étiquette Prénom, commencez par :
1. Mapper le chemin vers la valeur de la balise d'ouverture de la table : /table/tuple/atom
2. Spécifiez l'attribut au format : [@name='NamFirst']
3. Mettez l'ensemble de la déclaration entre guillemets :
Prénom : <xsl:value-of select="/table/tuple/atom[@name='NamFirst']"/>
Comment gérer une table imbriquée
Si vous incluez un champ dans votre Vue de Page qui est une table imbriquée (c'est-à-dire un champ unique avec plus d'une valeur, Autres noms : (Détails personnels) par exemple), il est nécessaire d'inclure une boucle simple lors de l'étape 2 de la configuration de la feuille de style.
Lorsque vous ajoutez un champ de table imbriquée dans la fenêtre Propriétés du rapport (à l'étape 6), il s'affiche avec l'icône de table suivante :
La boucle est définie avec l'élément xsl:for-each.
Lorsque le rapport est exécuté, le fichier xmldata.xml apparaîtra comme suit :
À nouveau, nous devons faire correspondre le chemin hiérarchique pour chaque atome. La boucle est spécifiée avec l'élément xsl:for-each :
```
<html xsl:version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns="http://www.w3.org/TR/xhtml1/strict">
```
```
	<title>Autres noms</title>
```
```
	<body>
```
```
 Prénom : <xsl:value-of select="/table/tuple/atom[@name='NamFirst']"/> 
```
```
 Nom : <xsl:value-of select="/table/tuple/atom[@name='NamLast']"/> 
```
```
 <xsl:for-each select="/table/tuple/table/tuple">Autres noms : 
```
```
 <xsl:value-of select="atom[@name='NamOtherNames']"/> 
```
```
 </xsl:for-each>
```
```
	</body>
```
```
</html>
```
Cela nous donne :
Enregistrez la feuille de style et joignez-la à la Vue de Page définie dans EMu (comme à l’Étape 3).
Désormais, lorsque la Vue de Page est sélectionnée (Vue>Paramètres de vue de page>Choix de la page), la Vue de Page s'affiche comme suit :
Cela nous donne :
Sauvegarder le Style de Page. Dans cet exemple, le fichier est sauvegardé comme xmldata.xsl.

Dans l'étape finale, le nouveau style de page est attaché au rapport Vue de Page défini dans l'Étape 1.